// Name:                     Input group
//
// Description:              Define style for input group
//
// Component:                `.am-input-group`
// Sub-objects:              `.am-input-group-label`
//                           `.am-input-group-btn`
//
// Modifiers:                `.am-input-group-lg`
//                           `.am-input-group-sm`
//                           `.am-input-group-primary`
//                           `.am-input-group-secondary`
//                           `.am-input-group-success`
//                           `.am-input-group-warning`
//                           `.am-input-group-danger`
//
// Uses:                     Form
//                           Button
//
// Via:                      http://getbootstrap.com/components/#input-groups
//
// =============================================================================
@input-group-height: unit(ceil(unit(@form-font-size * (1.2 + 0.5*2) + 0.2) * 10), px);

/* ==========================================================================
   Component: Input group
 ============================================================================ */

.@{ns}input-group {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border-collapse: separate;
    .@{ns}form-field {
        position: relative;
        z-index: 2;
        float: left;
        width: 100%;
        margin-bottom: 0;
    }
    .hook-input-group;
}

// Display as table-cell
// =============================================================================
.@{ns}input-group-label, .@{ns}input-group-btn, .@{ns}input-group .@{ns}form-field {
    display: table-cell;
    &:not(:first-child):not(:last-child) {
        border-radius: 0;
    }
}

// Input group text
.@{ns}input-group-label, .@{ns}input-group-btn {
    width: auto;
    white-space: nowrap;
    vertical-align: middle; // Match the inputs
}

// Text input groups
// =============================================================================
.@{ns}input-group-label {
    height: @input-group-height;
    padding: 0 0.6em;
    font-size: @form-font-size;
    font-weight: normal;
    line-height: @input-group-height - 2;
    color: @input-color;
    text-align: center;
    background-color: @input-group-label-bg;
    border: 1px solid @input-group-label-border-color;
    border-radius: @global-radius;
    // Nuke default margins from checkboxes and radios to vertically center within.
    input[type="radio"], input[type="checkbox"] {
        margin-top: 0;
    }
    .hook-input-group-label;
}

// Reset rounded corners
// =============================================================================
.@{ns}input-group:not(.@{ns}input-block)  .@{ns}form-field:first-child, .@{ns}input-group-label:first-child, .@{ns}input-group-btn:first-child>.@{ns}btn, .@{ns}input-group-btn:first-child>.@{ns}btn-group>.@{ns}btn, .@{ns}input-group-btn:first-child>.@{ns}dropdown-toggle, .@{ns}input-group-btn:last-child>.@{ns}btn:not(:last-child):not(.dropdown-toggle), .@{ns}input-group-btn:last-child>.@{ns}btn-group:not(:last-child)>.@{ns}btn {
    .border-right-radius(0);
}

.@{ns}input-group-label:first-child {
    border-right: 0;
}

.@{ns}input-group:not(.@{ns}input-group-block)  .@{ns}form-field:last-child, .@{ns}input-group-label:last-child, .@{ns}input-group-btn:last-child>.@{ns}btn, .@{ns}input-group-btn:last-child>.@{ns}btn-group>.@{ns}btn, .@{ns}input-group-btn:last-child>.@{ns}dropdown-toggle, .@{ns}input-group-btn:first-child>.@{ns}btn:not(:first-child), .@{ns}input-group-btn:first-child>.@{ns}btn-group:not(:first-child)>.@{ns}btn {
    .border-left-radius(0);
}

.@{ns}input-group-label:last-child {
    border-left: 0;
}

// Button input groups
// =============================================================================
.@{ns}input-group-btn {
    position: relative;
    // Jankily prevent input button groups from wrapping with `white-space` and
    // `font-size` in combination with `inline-block` on buttons.
    font-size: 0;
    white-space: nowrap;
    // Negative margin for spacing, position for bringing hovered/focused/actived
    // element above the siblings.
    >.@{ns}btn {
        position: relative;
        border-color: @input-border;
        +.@{ns}btn {
            margin-left: -1px;
        }
        // Bring the "active" button to the front
        &:hover, &:focus, &:active {
            z-index: 2;
        }
    }
    // Negative margin to only have a 1px border between the two
    &:first-child {
        >.@{ns}btn, >.@{ns}btn-group {
            margin-right: -2px;
        }
    }
    &:last-child {
        >.@{ns}btn, >.@{ns}btn-group {
            margin-left: -1px;
        }
    }
    .hook-input-group-btn;
}

// equal height
// =============================================================================
.@{ns}input-group .@{ns}form-field, .@{ns}input-group-btn>.@{ns}btn {
    height: @input-group-height;
    padding-bottom: auto;
}

// Modifiers - sizing
// =============================================================================
@lg-height: unit(ceil(unit(@form-font-size-lg * 1.2 + 0.5*2*@form-font-size-lg + 0.2) * 10), px);
@sm-height: unit(ceil(unit(@form-font-size-sm * 1.2 + 0.5*2*@form-font-size-sm + 0.2) * 10), px);
.@{ns}input-group-lg>.@{ns}form-field, .@{ns}input-group-lg>.@{ns}input-group-label, .@{ns}input-group-lg>.@{ns}input-group-btn>.@{ns}btn {
    height: @lg-height;
    font-size: @form-font-size-lg !important;
}

.@{ns}input-group-lg>.@{ns}input-group-label {
    line-height: @lg-height - 2;
}

.@{ns}input-group-sm>.@{ns}form-field, .@{ns}input-group-sm>.@{ns}input-group-label, .@{ns}input-group-sm>.@{ns}input-group-btn>.@{ns}btn {
    height: @sm-height;
    font-size: @form-font-size-sm !important;
}

.@{ns}input-group-sm>.@{ns}input-group-label {
    line-height: @sm-height - 2;
}

// Modifiers - colors
// =============================================================================
.input-group-color-variant(@bg: @btn-primary-bg, @color: @btn-primary-color, @border: @btn-primary-border) {
    .@{ns}input-group-label {
        background: @bg;
        color: @color;
    }
    .@{ns}input-group-label, .@{ns}input-group-btn>.@{ns}btn, &.@{ns}input-group .@{ns}form-field {
        // dirty way to fix border-color doesn't work within `.am-form`: add &.@{ns}input-group
        border-color: @border;
    }
}

.@{ns}input-group-primary {
    .input-group-color-variant();
    .hook-input-group-primary;
}

.@{ns}input-group-secondary {
    .input-group-color-variant(@btn-secondary-bg, @btn-secondary-color, @btn-secondary-border);
    .hook-input-group-secondary;
}

.@{ns}input-group-success {
    .input-group-color-variant(@btn-success-bg, @btn-success-color, @btn-success-border);
    .hook-input-group-success;
}

.@{ns}input-group-warning {
    .input-group-color-variant(@btn-warning-bg, @btn-warning-color, @btn-warning-border);
    .hook-input-group-warning;
}

.@{ns}input-group-danger {
    .input-group-color-variant(@btn-danger-bg, @btn-danger-color, @btn-danger-border);
    .hook-input-group-danger;
}

// Hooks
// =============================================================================
.hook-input-group() {}

.hook-input-group-label() {}

.hook-input-group-btn() {}

.hook-input-group-primary() {}

.hook-input-group-secondary() {}

.hook-input-group-success() {}

.hook-input-group-warning() {}

.hook-input-group-danger() {}

// TODO: v2 中使用 flexbox


.@{ns}input-group {
    margin-bottom: 1.25rem;

    .error-notice {
        display: inline-block;
        font-size: @global-font-size - 0.4;
        color: @global-danger;
        margin: 0;
        position: absolute;
        bottom: 0px;
        right: 1em;
        line-height: @input-group-height;
        z-index: 10;
    }

    &.@{ns}input-group-lg {
        .error-notice {
            line-height: @lg-height;
        }
    }
    &.@{ns}input-group-sm {
        .error-notice {
            line-height: @sm-height;
        }
    }
}

.@{ns}input-group-textarea {
    display: block;

    .@{ns}textarea {
        width: 100%;
        min-height: @global-font-size * 5;
        font-size: @global-font-size - 0.2;
        padding: @global-font-size - 0.6;
    }
}

.@{ns}input-transparent-label {
    background: transparent !important;
    border-color: transparent !important;
}
.@{ns}input-group-block {
    .@{ns}input-transparent-label {
        color: @input-color;
    }
}
